<div class="explorer-namespaces-mosaics-page">
  <div class="container-fluid main">
    <div class="row">
      <div class="col-sm-11">
        <h2>{{ 'EXPLORER_NS_MOS_TITLE' | translate }}</h2>
      </div>
    </div>

    <explorer-nav></explorer-nav>

    <div class="row namespaceRules">

      <div class="col-lg-3 col-md-6 col-sm-6">

        <div class="panel-heading namespacesArrows">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
              <h4>{{ 'GENERAL_NAMESPACES' | translate }}</h4>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 arrows">
              <div ng-show="$ctrl.namespaces.length > 10 && !$ctrl.searchText">
                <button class="buttonStyle" ng-disabled="$ctrl.currentPage == 0" ng-click="$ctrl.currentPage = $ctrl.currentPage-1">
                  <span class="fa fa-chevron-left" aria-hidden="true"></span>
                </button><b>{{$ctrl.currentPage+1}}/{{$ctrl.numberOfPages()}}</b>
                <button class="buttonStyle" ng-disabled="$ctrl.currentPage+1 >= $ctrl.numberOfPages()" ng-click="$ctrl.currentPage = $ctrl.currentPage+1">
                  <span class="fa fa-chevron-right" aria-hidden="true"></span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="panel-body" ng-show="$ctrl.namespaces.length">
              <!-- SEARCH NAMESPACES -->
              <div class="form-control formFloat">
                <input ng-model="$ctrl.searchText" type="text" placeholder="{{ 'EXPLORER_NS_MOS_SEARCH' | translate }}">
                <label><i class="fa fa-search"></i></label>
              </div>
              <br>
              <ul class="list-group" ng-repeat="ns in $ctrl.namespaces | orderBy:'namespace.fqn' | filter:$ctrl.searchNsInArray($ctrl.searchText) | startFrom:$ctrl.currentPage*$ctrl.pageSize | limitTo:$ctrl.pageSize">
                <li class="list-group-item" ng-class="$ctrl.selectedNamespaceName === ns.namespace.fqn ? 'active' : ''" ng-click="$ctrl.getSubNamespaces(ns.namespace.owner, ns.namespace.fqn);$ctrl.getMosaics(ns.namespace.owner, ns.namespace.fqn)">{{ns.namespace.fqn}}</li>
              </ul>
              <div class="panel-body nothing" ng-show="!$ctrl.namespaces.length">
                <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- RESULTS SUBNAMESPACES -->
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="panel-heading">
          <h4>{{ 'GENERAL_SUB_NAMESPACES' | translate }}</h4>
          <div ng-show="$ctrl.subNamespaces.length > 10">
            <button class="buttonStyle" ng-disabled="$ctrl.currentPageSubNs == 0" ng-click="$ctrl.currentPageSubNs = $ctrl.currentPageSubNs-1">
              <span class="fa fa-chevron-left" aria-hidden="true"></span>
            </button><b>{{$ctrl.currentPageSubNs+1}}/{{$ctrl.numberOfPagesSubNs()}}</b>
            <button class="buttonStyle" ng-disabled="$ctrl.currentPageSubNs+1 >= $ctrl.numberOfPagesSubNs()" ng-click="$ctrl.currentPageSubNs = $ctrl.currentPageSubNs+1">
              <span class="fa fa-chevron-right" aria-hidden="true"></span>
            </button>
          </div>
        </div>
        <div class="panel-body" ng-show="$ctrl.subNamespaces.length" >
          <ul class="list-group" ng-repeat="ns in $ctrl.subNamespaces | orderBy:'fqn' | startFrom:$ctrl.currentPageSubNs*$ctrl.pageSize | limitTo:$ctrl.pageSize">
            <li class="list-group-item" ng-class="$ctrl.selectedSubNamespaceName === ns.fqn ? 'active' : ''" ng-click="$ctrl.getMosaics(ns.owner, ns.fqn)">{{ $ctrl.substringSubNs(ns.fqn) }}</li>
          </ul>
        </div>
        <div class="panel-body nothing" ng-show="!$ctrl.subNamespaces.length">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>
      </div>
      <!-- RESULTS MOSAICS -->
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="panel-heading">
          <h4>{{ 'GENERAL_MOSAICS' | translate }}</h4>
          <div ng-show="$ctrl.mosaics.length > 10"><button class="buttonStyle" ng-disabled="$ctrl.currentPageMos == 0" ng-click="$ctrl.currentPageMos = $ctrl.currentPageMos-1"><span class="fa fa-chevron-left" aria-hidden="true"></span></button><b>{{$ctrl.currentPageMos+1}}/{{$ctrl.numberOfPagesMos()}}</b><button class="buttonStyle" ng-disabled="$ctrl.currentPageMos+1 >= $ctrl.numberOfPagesMos()" ng-click="$ctrl.currentPageMos = $ctrl.currentPageMos+1"> <span class="fa fa-chevron-right" aria-hidden="true"></span></button></div>
        </div>
        <div class="panel-body" ng-show="$ctrl.mosaics.length" >
          <ul class="list-group" ng-repeat="mos in $ctrl.mosaics | orderBy:'id.name' | startFrom:$ctrl.currentPageMos*$ctrl.pageSize | limitTo:$ctrl.pageSize">
            <li class="list-group-item" ng-class="$ctrl.selectedMosaicName === mos.id.namespaceId + ':' + mos.id.name ? 'active' : ''" ng-click="$ctrl.processMosaic(mos)">{{mos.id.name}}</li>
          </ul>
        </div>
        <div class="panel-body nothing" ng-show="!$ctrl.mosaics.length">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>
      </div>
      <!-- RESULTS MOSAICS DETAILS -->
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="panel-heading">
          <h4 class="reverseEllipsis">{{ $ctrl.selectedMosaicName }}</h4>
        </div>
        <div class="panel-body" ng-show="$ctrl.selectedMosaic" >
          <p class="bg-info">{{ $ctrl.selectedMosaic.description }}</p>
          <table class="table table-hover">
            <thead>
              <tr>
                <th>{{ 'GENERAL_NAME' | translate }}</th>
                <th>{{ 'GENERAL_VALUE' | translate }}</th>
              </tr>
            </thead>
            <tbody >
              <tr>
                <td>{{ 'MOSAIC_DEFINITION_QUANTITY' | translate }}</td>
                <td>{{$ctrl.selectedMosaic.properties[1].value}}</td>
              </tr>
              <tr>
                <td>{{ 'MOSAIC_DEFINITION_DIV' | translate }}</td>
                <td>{{$ctrl.selectedMosaic.properties[0].value}}</td>
              </tr>
              <tr ng-show="$ctrl.selectedMosaic.levy.type">
                <td>{{ 'EXPLORER_HOME_MOSAICS_LEVY' | translate }}</td>
                <td>
                  <span>{{$ctrl.selectedMosaic.levy.mosaicId.namespaceId}}:{{$ctrl.selectedMosaic.levy.mosaicId.name}}</span>
                </td>
              </tr>
              <tr ng-show="$ctrl.selectedMosaic.levy.type">
                <td>{{ 'MOSAIC_DEFINITION_LEVY_FEE_TYPE' | translate }}</td>
                <td>
                  <span ng-show="$ctrl.selectedMosaic.levy.type === 1">{{ 'MOSAIC_DEFINITION_LEVY_FEE_TYPE_1' | translate }} ({{$ctrl.selectedMosaic | fmtLevyFee:1:$ctrl.selectedMosaic.levy:$ctrl.selectedMosaicLevyDefinition}})</span>
                  <span ng-show="$ctrl.selectedMosaic.levy.type === 2">{{ 'MOSAIC_DEFINITION_LEVY_FEE_TYPE_2' | translate }} (x{{($ctrl.selectedMosaic.levy.fee / 10000).toFixed(4)}})</span>
                </td>
              </tr>
              <tr>
                <td>{{ 'MOSAIC_DEFINITION_MUTABLE_SUPPLY' | translate }}</td>
                <td>{{$ctrl.selectedMosaic.properties[2].value}}</td>
              </tr>
              <tr>
                <td>{{ 'MOSAIC_DEFINITION_TRANSFERABLE' | translate }}</td>
                <td>{{$ctrl.selectedMosaic.properties[3].value}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="panel-body nothing" ng-show="!$ctrl.selectedMosaic">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>
      </div>

    </div>
  </div>
</div>
